<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <son>
            <template v-slot:default="user">
                <p>这个是传来的user,姓名：{{user.outuser.name}}, 年龄：{{user.outuser.age}} </p>
            </template>

            <template v-slot:score="myScore">
                我的分数是：<h3>{{myScore.fenshu}}</h3>
            </template>

            <template v-slot:list="myList">
                <ul>
                    <li>你的分数是：{{myList.score}}</li>
                    <li v-for="item in myList.person">姓名：{{item.name}},  年龄：{{item.age}}</li>
                </ul>
            </template>
        </son>
    </div>

    <template id="son">
        <div>
            <slot name="default" :outuser="user"></slot>

            <slot name="score" :fenshu="score"></slot>

            <slot name="list" :person="people" :score="score"></slot>
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script>

    /*作用域插槽:
	其实就是可以传递数据的插槽。子组件中的一些数据想在父组件中使用，必须通过规定的方法来传递。在官方文档中提出了一条规则，**父级模板里的所有内容都是在父级作用域中编译的。子模板里的所有内容都是在子作用域中编译的。**如果你在父组件直接使用子组件中的值，是会报错的。
		(1)匿名插槽的作用域插槽
		为了让子组件中的数据 在父级的插槽内容中可用，我们可以将数据作为元素的一个特性绑定上去：
		
		语法：v-bind:自定义数据名字="子组件中的数据" 
		
		绑定在 元素上的特性（v-bind:list=“user”）被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。
		
		语法：v-slot:default="随意取的
		名字"  // default可省略，简写为v-slot="随意取 的名字"
		
		 注意：
		      父组件中的sonlist可以是随意取的。
		      子组件中list是随意取的，与之对应的是父组件中的users。
		      子组件中的user为数据。
		 
		 具名插槽的作用域插槽
		 与匿名插槽同理，只需要把default替换成插槽的name值即可。*/

        var vm = new Vue({
            el: '#app',
            data: {

            },
            components: {
                son: {
                    template: '#son',
                    data() {
                        return {
                            user:{
                                name:'韩梅梅',
                                age:18
                            },
                            score:90,						
                            people:[
                                {
                                    name:"张三",
                                    age:12
                                },
                                {
                                    name:'李四',
                                    age:13
                                },
                                {
                                    name:'王二',
                                    age:14
                                }
                            ]   
                        }
                    },
                }
            }
        })
    </script>
</body>
</html>